<template>
    <div class="main-container">
        <!-- 在此处放置左边列表内容--树形菜单 -->
        <main-fixed :title="fixedTitle" :resize="true">
            <div slot="list">
                <el-tree :data="menuTree" :props="defaultProps" node-key="F_ItemDetailId" ref="cTree"
                    :default-expand-all="false" @node-click="handleNodeClick">
                    <span class="custom-tree-node" slot-scope="{ node, data}">
                        <i class="el-icon-document"></i>
                        <span>{{ data.F_ItemName }}</span>
                    </span>
                </el-tree>
            </div>
        </main-fixed>

        <main-content :title="contentTitle" :paddingLeft="205" :padding-top="94">
            <div slot="search">
                <!-- 搜索内容 -->
                <div class="search-box">
                    <el-input v-model="keyword" size="small" :placeholder="$t('searchModule.searchPlaceholder')"
                        style="width: 200px; margin-right:5px"></el-input>
                    <el-button type="primary" icon="el-icon-search" size="small" @click="searchMenu">
                        {{ $t("searchModule.searchBtn") }}
                    </el-button>
                    <el-button icon="el-icon-refresh" size="small" @click="searchReset">
                        {{ $t("searchModule.searchReset") }}</el-button>
                </div>
            </div>
            <div slot="table">
                <!-- 数据表格内容 -->
                <avue-crud ref="cuTable" v-if="F_Item" :data="menuTable" :page.sync="page" :option="option" stripe @on-load="onPageLoad"
                    @row-click="rowClick" @row-dblclick="handleRowDBLClick">
                    <template slot="menuLeft">
                        <el-dialog v-dialogDrag :title="diologTitle" :append-to-body="true"
                            :visible.sync="dialogVisible" :close-on-click-modal="false" width="40%"
                            :before-close="handleClose" style="padding: 10px 20px;">
                            <IPhoneFunc v-if="dialogVisible" :menuTreeData="F_Item" :mobileForm="mobileForm"
                                ref="mobileForm" :FuncId="F_Id">
                            </IPhoneFunc>
                            <span slot="footer" class="dialog-footer">
                                <el-button size="mini" @click="cancelForm()">{{ $t('buttonModule.modalCancelBtn') }}
                                </el-button>
                                <el-button size="mini" type="primary" @click="userFormSubmit('mobileForm')"
                                    :loading="flagFunc">
                                    {{ flagFunc ? $t('workFlow.WFMenu.hintSubmit') : $t('buttonModule.modalSureBtn') }}
                                </el-button>
                            </span>
                        </el-dialog>
                        <el-button type="primary" icon="el-icon-plus" size="small" @click="add()">
                            <!-- ******新增****** -->
                            {{ $t('buttonModule.addBtn') }}
                        </el-button>
                        <!-- ******启用停用事件尚未处理******* -->
                        <!-- <el-button size="small" @click="showOkDialog">启用</el-button>
                        <el-button size="small" @click="showOkDialog">停用</el-button> -->
                    </template>
                    <template slot="is_show" slot-scope="scope">
                        <el-switch @change="switchChange($event, scope.row)" v-model="scope.row.is_show"
                            :active-value="1" :inactive-value="0"></el-switch>
                    </template>
                    <template slot-scope="scope" slot="menu">
                        <!-- 编辑 -->
                        <el-button type="opr-primary" size="mini" @click="edit(scope.row, scope.index)">
                            {{ $t('tableOperationModule.editorBtn') }}</el-button>
                        <el-button type="opr-danger" size="mini" @click="deleteForm(scope.row, scope.index)">
                            {{ $t('tableOperationModule.deleteBtn') }}</el-button>
                    </template>
                </avue-crud>
            </div>
        </main-content>
        <el-dialog v-dialogDrag :title="$t('workFlow.privateStampInfo.titleInfor')" :append-to-body="true"
            :visible.sync="okDialog" width="30%" :before-close="okClose" :close-on-click-modal="false">
            <div v-if="okDialog">
                <i class="fa fa-question-circle-o"></i>
                {{ okMessage }}
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="okSubmit">{{ $t('buttonModule.modalSureBtn') }}
                </el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import tableOptionMixin from "@/mixins/tableOption";
import MainFixed from "../../page/main/MainFixed";
import MainContent from "../../page/main/MainContent";
import IPhoneFunc from "./components/IPhoneFunc.vue";
import { getDataItem } from '@/api/system/dataitem'
import {
    getAppList,
    getAppTree,
    appEnable,
    appDelete
} from "@/api/organization/iphoneFunc";
// import { baseUrl, previewUrl } from "@/config/env";

export default {
    name: "IPhoneFunction",
    mixins: [tableOptionMixin],
    components: { MainContent, MainFixed, IPhoneFunc },
    data() {
        const _this = this;
        return {
            flagFunc: false,
            contentTitle: "手机功能",
            computedHeight: -60,
            fixedTitle: "功能分类",
            F_Item: "",
            searchState: "",
            menuTree: [],
            menuTable: [],
            order: {
                order: "desc",
                prop: "",
            },
            mobileForm: {
                menu_type_id: '',
                code: "",
                name: '',
                type: '',
                sort_code: "",
                implement_type: "",
                redirect_url: "",
                ios_path: '',
                android_path: '',
                icon_path: '',
                is_show: '1'
            },
            page: {
                pageSize: 20,
                total: 0,
                currentPage: 1,
            },
            keyword: null,
            defaultProps: {
                children: "children",
                label: "F_ItemValue",
            },
            dialogVisible: false,
            diologTitle: "",//新增或编辑表格名称
            okDialog: false,
            okMessage: "",
            F_Id: "",
            okVal: "",
            typeOptions: [],
            implementOptions: [],
            swichDic: [
                {
                    label: "",
                    value: 0
                },
                {
                    label: "",
                    value: 1
                }
            ],
            option: {
                highlightCurrentRow: true,
                stripe: false,
                addBtn: false,
                menuWidth: 150,
                border: false,
                page: true,
                index: true,
                indexLabel: this.$t('workFlow.privateStampInfo.tabNum'),
                align: "center",
                menuAlign: "center",
                simplePage: true,
                delBtn: false,
                editBtn: false,
                column: [
                    {
                        label: "功能名称",
                        prop: "name",
                        align: 'left',
                        minWidth: '95',
                    },
                    {
                        label: "功能分类",
                        prop: "type",
                        align: 'left',
                        minWidth: '95',
                    },
                    {
                        sortable: true,
                        label: "排序",
                        prop: "sort_code",
                        align: 'left',
                        minWidth: '95',
                    },
                    {
                        label: "功能实现方式",
                        prop: "implement_type",
                        align: 'left',
                        minWidth: '95',
                    },
                    {
                        label: "显隐状态",
                        prop: "is_show",
                        align: 'left',
                        minWidth: '85',
                        slot: true
                    }
                ]
            },
        };
    },
    mounted() {
        this.getAppFunc();
        this.getItemList();
        if (window.screen.width < 1310) {
            this.computedHeight = -25;
        }
        this.changeBodyHeight();
    },
    methods: {
        // 获取功能分类列表
        getTypeData() {
            getDataItem("AppFunctionType").then((res) => {
                if (res.data && res.data.code == 0) {
                    if (this.F_Item.F_ItemName == 'OA审批') {
                        this.typeOptions = []
                        res.data.data.forEach((ele) => {
                            this.typeOptions.push({
                                value: ele.F_ItemValue,
                                label: ele.F_ItemName
                            })
                        })
                    } else {
                        this.typeOptions = [{
                            value: '-',
                            label: '-'
                        }]
                    }
                }
            })
        },
        handleRowDBLClick(row, event) {
            if (this.openDoubleClickEdit) {
                this.edit(row)
            }
        },
        /* 获取菜单树形数据 */
        getAppFunc() {
            getAppTree("AppMenuType").then((res) => {
                this.menuTree = res.data.data;
                this.F_Item = {
                    F_ItemValue: "",
                    F_ItemName: "所有分类",
                };
            });
        },
        /* 选择树形菜单加载菜单信息 */
        handleNodeClick(data) {
            this.keyword = null;
            this.F_Item = data;
            this.getItemList();
            this.getTypeData()
        },
        /*表格数据 */
        getItemList() {
            var obj = {
                queryStr: this.keyword,
                menuTypeId: this.F_Item.F_ItemDetailId,
                limit: this.page.currentPage,
                size: this.page.pageSize,
            };
            getAppList(obj).then((res) => {
                this.menuTable = res.data.data.Rows;
                this.page.total = res.data.data.Total;
            });
        },
        /*分页 */
        onPageLoad() {
            this.getItemList();
        },
        /* 新增 */
        add() {
            this.diologTitle = "新增功能";
            this.dialogVisible = true;
            this.F_Id = "";
            this.mobileForm = {
                menu_type_id: '',
                code: "",
                name: '',
                type: '',
                sort_code: "",
                implement_type: "",
                redirect_url: "",
                ios_path: '',
                android_path: '',
                icon_path: '',
                is_show: '1',
                icon_full_path: ''
            };
            this.$nextTick(() => {
                this.$refs.mobileForm.$refs.elFile.clearFiles()
            })
        },
        /* 提交表单 */
        userFormSubmit(formName) {
            let that = this;
            that.flagFunc = true;
            this.$refs[formName].userFormSubmit(function (res) {
                that.getItemList();
                that.cancelForm();
            }).finally(() => {
                this.flagFunc = false;
            });
        },

        /* 取消弹窗 */
        cancelForm() {
            this.dialogVisible = false;
        },
        /* 关闭弹窗 */
        handleClose(done) {
            done();
        },
        /* 表格编辑 */
        edit(row, index) {
            this.diologTitle = "编辑功能";
            this.dialogVisible = true;
            this.F_Id = row.F_Id;
            this.mobileForm = {
                menu_type_id: this.F_Item.F_ItemDetailId,
                code: row.code,
                name: row.name,
                type: this.F_Item.F_ItemName != 'OA审批' ? '-' : this.filterType(row.type),
                sort_code: row.sort_code,
                implement_type: row.implement_type == '原生' ? 'protogenesis' : 'html_5',
                redirect_url: row.redirect_url,
                ios_path: row.ios_path,
                android_path: row.android_path,
                icon_path: row.icon_path,
                is_show: row.is_show,
                icon_full_path: row.icon_full_path
            };
        },
        filterType(val) {
            let str = ''
            this.typeOptions.forEach((ele) => {
                if (ele.label == val) {
                    str = ele.value
                }
            })
            return str
        },
        /*表格删除 */
        deleteForm(row, index) {
            this.$confirm(this.$t('deletePrompt.promptContent'), this.$t('deletePrompt.promptTitle'), {
                confirmButtonText: this.$t('buttonModule.modalSureBtn'),
                cancelButtonText: this.$t('buttonModule.modalCancelBtn'),
                type: "warning",
            })
                .then(() => {
                    appDelete(row.F_Id).then(() => {
                        this.getItemList();
                        this.$notify({
                            title: this.$t('deletePrompt.successTitle'),
                            message: this.$t('deletePrompt.successDeleted'),
                            type: "success",
                        });
                    });
                })
                .catch(() => { });
        },
        /* 查询 */
        searchMenu() {
            this.page.currentPage = 1
            this.getItemList();
        },
        /* 查询表单重置 */
        searchReset() {
            this.keyword = null;
            this.searchState = "";
            this.getItemList();
        },
        rowClick(row, event, column) {
            this.F_Id = row.F_Id;
        },
        // 切换状态
        switchChange($event, row) {
            appEnable(row.F_Id, $event).then(res => {
                if (res.data.code == 0) {
                    this.$notify({
                        title: '状态',
                        message: '状态修改成功',
                        type: "success",
                    });
                } else {
                    this.$notify({
                        title: '状态',
                        message: res.data.msg,
                        type: "warning",
                    });
                }
            })
        }
    }
}
</script>

<style scoped>
.upload-demo {
    display: inline-block;
}

/* css */
.main-container {
    height: 100%;
    padding: 0 8px;
}

.filelog /deep/ .el-dialog {
    height: 100%;
}

.filelog /deep/ .el-dialog__body {
    height: calc(100% - 51px);
}

div /deep/ .custom-tree-node span {
    font-size: 14px;
    padding-left: 10px;
}

div /deep/ .custom-tree-node i {
    font-size: 12px;
}

/deep/ .avue-crud__left {
    height: 31px;
}
</style>